<template>
  <div>
      <div class="myRow">
        <div>
          <i-button class="myButton" type="info" ghost icon="md-add-circle"  @click="modal = true">新增角色</i-button>
          <i-button :disabled="selectList.length === 0" class="myButton" type="error" ghost icon="md-trash" @click="deleteList()">批量删除</i-button>
        </div>
        <div>
          <Input v-model="searchData" icon="ios-search" @on-click="getListFun" @on-enter="getListFun" placeholder="搜索内容" style="width: auto" />
        </div>
      </div>
      <i-table :loading="loading" border ref="selection" :columns="columns4" :data="listData.listT"  @on-selection-change="selectChange"></i-table>
      <div class="footPage">
        <Page @on-change="changePage" :total="listData.recordCount" :page-size="listData.pageSize" :current="pageIndex"/>
      </div>
      <Modal
        v-model="modal"
        title="新增角色">
        <div id="box">
          <i-form :model="addData" label-position="right" ref="addData" :rules="ruleValidate" :label-width="100">
            <FormItem label="角色名称：" prop="roleName">
                <i-input v-model="addData.roleName"></i-input>
            </FormItem>
            <FormItem label="角色描述：" prop="roleDescription">
              <i-input v-model="addData.roleDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="角色描述"></i-input>
            </FormItem>
            <FormItem label="布局页面：" prop="pageTemplate">
              <RadioGroup v-model="addData.pageTemplate" @on-change="changeLayout">
                  <Radio label="Layout"></Radio>
                  <Radio label="TestLayout"></Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="页面配置：">
              <div class="myTableBox">
                <div class="myTableRow headerTitle">
                  <div class="firstColumn">授权模块</div>
                  <div class="secondColumn textCenter">模块页面</div>
                </div>
                <CheckboxGroup @on-change="pageListChange" v-model="social">
                  <div v-for="(element, id) in roleListData" :key="id" v-if="element.pageTemplate === addData.pageTemplate">
                    <div class="myTableRow" v-for="(item, index) in element.permissionPageConfigList" :key="index">
                      <div class="firstColumn">{{item.subordinateModuleName}}</div>
                      <div class="secondColumn">
                        <Checkbox v-for="(pageItem, pageIndex) in item.pageList" :key="pageIndex" :label="pageItem.id">
                            <span>{{pageItem.pageName}}</span>
                        </Checkbox>
                      </div>
                    </div>
                  </div>
                </CheckboxGroup>
              </div>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset('addData')">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="ok('addData')">确定</i-button>
        </div>
    </Modal>
    <Modal
        v-model="modal2"
        title="修改角色">
        <div id="box">
          <i-form :model="editData" label-position="right" ref="editData" :rules="ruleValidate" :label-width="100">
            <FormItem label="角色名称：" prop="roleName">
                <i-input v-model="editData.roleName"></i-input>
            </FormItem>
            <FormItem label="角色描述：" prop="roleDescription">
              <i-input v-model="editData.roleDescription" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="角色描述"></i-input>
            </FormItem>
            <FormItem label="布局页面：" prop="pageTemplate">
              <RadioGroup v-model="editData.pageTemplate" @on-change="changeLayout(1)">
                  <Radio label="Layout"></Radio>
                  <Radio label="TestLayout"></Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="页面配置：">
              <div class="myTableBox">
                <div class="myTableRow headerTitle">
                  <div class="firstColumn">授权模块</div>
                  <div class="secondColumn textCenter">模块页面</div>
                </div>
                <CheckboxGroup v-model="editData.permissionsSettingList">
                  <div v-for="(element, id) in roleListData" :key="id" v-if="element.pageTemplate === editData.pageTemplate">
                    <div class="myTableRow" v-for="(item, index) in element.permissionPageConfigList" :key="index">
                      <div class="firstColumn">{{item.subordinateModuleName}}</div>
                      <div class="secondColumn">
                        <Checkbox v-for="(pageItem, pageIndex) in item.pageList" :key="pageIndex" :label="pageItem.id">
                            <span>{{pageItem.pageName}}</span>
                        </Checkbox>
                      </div>
                    </div>
                  </div>
                </CheckboxGroup>
              </div>
            </FormItem>
          </i-form>
        </div>
        <div slot="footer">
            <i-button type="text" :loading="modal_loading" @click="reset2('editData')">重置</i-button>
            <i-button type="primary" :loading="modal_loading" @click="editFun('editData')">保存</i-button>
        </div>
    </Modal>
  </div>
</template>

<script>
import {
  AddPermissionsRole,
  UpdatePermissionsRoleByIdsOrId,
  UpdatePermissionsRole,
  GetPermissionPageConfigAllInfo,
  GetPermissionsRolePager
} from "@/api/permissionsRole";
export default {
  name: "home",
  components: {},
  data() {
    return {
      ruleValidate: {
        roleName: [
          {
            required: true,
            message: "请输入角色名",
            trigger: "blur"
          }
        ],
        roleDescription: [
          {
            required: true,
            message: "请输入角色描述",
            trigger: "blur"
          }
        ]
      },
      roleTotalData: [], // 角色收据
      selectList: [], // 多选列表
      searchData: "",
      roleListData: [], // 角色列表
      selectStr: "", // 选中列表id字符串
      pageIndex: 1, // 当前页
      modal_loading: false,
      addData: {
        roleName: "",
        pageTemplate: "Layout",
        roleDescription: ""
      },
      editData: {
        roleName: "",
        roleDescription: "",
        pageTemplate: "Layout",
        permissionsSettingList: []
      },
      social: [], // 角色页面列表
      addPermissionsSetting: "", // 角色页面列表字符串
      editPermissionsSetting: "", // 修改列表字符串
      editId: "",
      modal: false,
      modal2: false,
      loading: false,
      columns4: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "ID",
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "角色名称",
          key: "roleName",
          align: "center"
        },
        {
          title: "角色描述",
          key: "roleDescription",
          align: "center"
        },
        {
          title: "创建时间",
          key: "createTime",
          align: "center"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.deleteBtn(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      listData: {}
    };
  },
  watch: {
    value(res) {
      this.setChart(res);
    }
  },
  mounted() {
    this.getListFun();
    this.getRoleList();
  },
  methods: {
    changeLayout(id) {
      switch (id) {
        case 1:
          this.$set(this.editData, "permissionsSettingList", []);
          break;
        default:
          this.$set(this, "addPermissionsSetting", "");
          this.$set(this, "social", []);
          break;
      }
      debugger;
    },
    instance(confirmationBoxContent) {
      const title = confirmationBoxContent.title;
      const content = confirmationBoxContent.contentText;
      this.$Modal.confirm({
        title: title,
        content: content,
        onOk: () => {
          this.deleteFun(confirmationBoxContent.params);
        },
        onCancel: () => {
          this.$Message.info("操作取消");
        }
      });
    },
    // 批量删除
    deleteList() {
      var newStr = "";
      for (var i = 0; i < this.selectList.length; i++) {
        if (newStr === "") {
          newStr = this.selectList[i].id;
        } else {
          newStr = newStr + "," + this.selectList[i].id;
        }
      }
      var confirmationBoxContent = {
        title: "确认删除",
        contentText: "一旦删除不可撤销，确认删除？",
        params: newStr.toString()
      };
      this.instance(confirmationBoxContent);
    },
    // 获取角色页面列表
    getRoleList() {
      GetPermissionPageConfigAllInfo()
        .then(res => {
          if (res.data.code === "0") {
            // this.$set(this, "roleTotalData", res.data.result);
            this.$set(this, "roleListData", res.data.result);
            debugger;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取用户列表数据
    getListFun() {
      this.$set(this, "loading", true);
      const p = {
        pageIndex: this.pageIndex,
        pageSize: "10",
        keyWord: this.searchData
      };
      GetPermissionsRolePager(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "listData", res.data.result);
          }
          this.$set(this, "loading", false);
        })
        .catch(err => {
          console.log(err);
          this.$set(this, "loading", false);
        });
    },
    // 新增接口
    addFun() {
      const p = {
        roleName: this.addData.roleName,
        roleDescription: this.addData.roleDescription,
        permissionsSetting: this.addPermissionsSetting,
        isDelete: 0
      };
      AddPermissionsRole(p)
        .then(res => {
          if (res.data.code === "0") {
            this.$set(this, "addData", {
              roleName: "",
              roleDescription: ""
            });
            this.$set(this, "addPermissionsSetting", "");
            this.$set(this, "social", []);
            this.getListFun();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 分页回调方法
    changePage(index) {
      this.$set(this, "pageIndex", index);
      this.getListFun();
    },
    ok(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.addFun();
          this.$set(this, "modal", false);
        } else {
          this.$Message.error("提交内容有误！请检查");
        }
      });
    },
    editFun(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          var editPermissionsSetting = "";
          for (
            var i = 0;
            i < this.editData.permissionsSettingList.length;
            i++
          ) {
            if (editPermissionsSetting === "") {
              editPermissionsSetting = this.editData.permissionsSettingList[i];
            } else {
              editPermissionsSetting =
                editPermissionsSetting +
                "," +
                this.editData.permissionsSettingList[i];
            }
          }
          const p = {
            roleName: this.editData.roleName,
            roleDescription: this.editData.roleDescription,
            permissionsSetting: editPermissionsSetting,
            isDelete: 0,
            id: this.editId
          };
          UpdatePermissionsRole(p)
            .then(res => {
              if (res.data.code === "0") {
                this.$set(this, "editData", {
                  roleName: "",
                  roleDescription: "",
                  pageTemplate: "Layout",
                  isDelete: 0
                });
                this.getListFun();
              }
            })
            .catch(err => {
              console.log(err);
            });
          this.$set(this, "modal2", false);
        } else {
          this.$Message.error("提交内容有误！请检查");
        }
      });
    },
    edit(params) {
      debugger;
      this.$set(this, "editData", {
        roleName: params.row.roleName,
        roleDescription: params.row.roleDescription,
        permissionsSettingList: params.row.permissionsSettingList,
        pageTemplate: params.row.pageTemplate,
        id: params.row.roleId
      });
      this.$set(this, "editPermissionsSetting", params.row.permissionsSetting);
      this.$set(this, "editId", params.row.id);
      this.$set(this, "modal2", true);
    },
    deleteFun(ids) {
      const p = {
        idsStr: ids,
        isDelete: 1
      };
      UpdatePermissionsRoleByIdsOrId(p)
        .then(res => {
          if (res.data.code === "0") {
            this.getListFun();
            this.$set(this, "selectList", []);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    deleteBtn(params) {
      var confirmationBoxContent = {
        title: "确认删除",
        contentText: "一旦删除不可撤销，确认删除？",
        params: params.row.id.toString()
      };
      this.instance(confirmationBoxContent);
    },
    reset(name) {
      this.$refs[name].resetFields();
      this.$set(this, "addData", {
        roleName: "",
        pageTemplate: "Layout",
        roleDescription: ""
      });
      this.$set(this, "addPermissionsSetting", "");
      this.$set(this, "social", []);
    },
    reset2(name) {
      this.$refs[name].resetFields();
      this.$set(this, "editData", {
        roleName: "",
        roleDescription: "",
        pageTemplate: "Layout",
        permissionsSettingList: []
      });
    },
    // 新增角色页面列表触发事件
    pageListChange() {
      console.log(this.social);
      var str = "";
      for (var i = 0; i < this.social.length; i++) {
        if (str === "") {
          str = this.social[i];
        } else {
          str = str + "," + this.social[i];
        }
      }
      this.$set(this, "addPermissionsSetting", str);
    },
    selectChange(list) {
      this.$set(this, "selectList", list);
    }
  }
};
</script>

<style lang="less">
.textCenter {
  text-align: center;
}
.myRow {
  width: 100%;
  margin: 0px 0px 10px;
  display: flex;
  justify-content: space-between;
}
.myButton {
  margin-right: 6px;
}
.footPage {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}
.myTableBox {
  font-size: 12px;
  width: 100%;
  border: 1px solid #dcdee2;
  border-radius: 4px;
}
.myTableBox .myTableRow {
  display: flex;
  width: 100%;
  line-height: 30px;
  border-bottom: 1px solid #dcdee2;
}
.myTableBox .headerTitle {
  line-height: 32px;
}
.myTableBox .firstColumn {
  font-size: 12px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30%;
  border-right: 1px solid #dcdee2;
  // height: 32px;
}
.myTableBox .secondColumn {
  padding: 0 20px;
  display: inline-block;
  width: 70%;
  // height: 32px;
}
#box {
  max-height: 300px;
  overflow-y: scroll;
}
#box::-webkit-scrollbar {
  display: none;
}
</style>
